---
metaTitle: Section
metaDescription: Denotes a section of page content.
sourcePath: components/section
---

```jsx live=true
<Box
	py="8"
	style={{ backgroundColor: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}
>
	<DecorativeBox asChild>
		<Section size="2" />
	</DecorativeBox>
</Box>
```

## API Reference

This component is based on the `section` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

<ThemesPropsTable defs="sectionPropDefs" />

The following props are shared between [Box](./box), [Flex](./flex), [Grid](./grid), [Container](./container) and [Section](./section) components. Read more about layout components in [Layout](/themes/docs/overview/layout).

<ThemesPropsTable defs="layoutPropDefs" />
